<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://8.130.18.175/static/index/layui/css/layui.css">
</head>

<body>
    <div>
        <select name="convertType" id="convertType">
            <option value="pdf_2_png">pdf转png</option>
            <option value="doc_2_pdf">doc转pdf</option>
            <option value="img">图片格式转换</option>
            <option value="imgCompress">图片压缩</option>
            <option value="video">视频格式转换</option>
            <option value="videoCompress">视频压缩</option>
        </select>
    </div>
    <div style="margin-top: 2rem;">
        <input type="file" name="file" id="file">

        <input type="submit" id="sendFileForm" value="上传">

        <input type="text" name="toImgFormat" value="" placeholder="需要转换的格式" style="display: none;">

        <select name="compressType">
            <option value="ys">有损压缩</option>
            <option value="dbl">等比例压缩</option>
        </select>
        <input type="number" name="compressPersent" value="" placeholder="压缩比例（1-100）" style="display: none;">

        <input type="text" name="toVideoFormat" value="" placeholder="需要转换的格式" style="display: none;">

        <input type="number" name="crf" value="" placeholder="压缩比例（0~51）" style="display: none;">
    </div>
    <div style="margin-top: 3rem;">
        <span>说明：多种转换只能同时使用一种，使用完毕后请刷新页面</span>
    </div>

    <div>您的ip地址：{$realIp}</div>
</body>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="http://8.130.18.175/static/index/layui/layui.js"></script>

<script>
    layui.use(function () {
        var layer = layui.layer;
        var util = layui.util;
    });

    //创建连接
    ws = new WebSocket("ws://8.130.18.175:9501");
    //连接成功建立后响应
    ws.onopen = function () {
        console.log("成功连接到swoole服务器");
    }

    //收到服务器消息后响应
    ws.onmessage = function (e) {
        console.log("收到服务器消息:" + e.data + "'\n");

        let msg = JSON.parse(e.data);
        if (msg.type == 'error') {
            layer.msg(msg.data[0]);
        } else {
            let href = msg.data[0];
            let name = msg.data[1];
            // 使用示例
            downloadFile(href, name);
        }
    }

    //连接关闭后响应
    ws.onclose = function () {
        console.log("关闭连接");
        ws = null;
    }

    //发送arraybuffer(二进制文件)
    $("#sendFileForm").click(function () {
        var inputElement = document.getElementById("file");
        var fileList = inputElement.files;

        for (var i = 0; i < fileList.length; i++) {
            let toImgFormat = $("input[name='toImgFormat']").val();
            let compressPersent = $("input[name='compressPersent']").val();
            let toVideoFormat = $("input[name='toVideoFormat']").val();
            let crf = $("input[name='crf']").val();
            let compressType = $("select[name='compressType']").val();
            let fileName = fileList[i].name;
            //发送文件名
            let ad = JSON.stringify({ name: fileList[i].name, convertType: $("#convertType").val(), toImgFormat: toImgFormat, compressPersent: compressPersent, toVideoFormat: toVideoFormat, crf: crf, compressType: compressType });
            console.log(ad);
            ws.send(ad);
            //读取文件　　
            var reader = new FileReader();
            reader.readAsArrayBuffer(fileList[i]);
            //文件读取完毕后该函数响应
            reader.onload = function loaded(evt) {
                var binaryString = evt.target.result;
                // Handle UTF-16 file dump
                console.log("\n开始发送文件");
                ws.send(binaryString);
            }
        }
        return false;
    });

    $("#convertType").change(function () {
        let v = $(this).val();
        switch (v) {
            case 'img':
                $("input[name='crf']").hide();
                $("input[name='toVideoFormat']").hide();
                $("input[name='compressPersent']").hide();
                $("select[name='compressType']").hide();
                $("input[name='toImgFormat']").show();
                break;
            case 'imgCompress':
                $("input[name='crf']").hide();
                $("input[name='toImgFormat']").hide();
                $("input[name='toVideoFormat']").hide();
                $("input[name='compressPersent']").show();
                $("select[name='compressType']").show();
                break;
            case 'video':
                $("input[name='crf']").hide();
                $("input[name='toImgFormat']").hide();
                $("input[name='compressPersent']").hide();
                $("select[name='compressType']").hide();
                $("input[name='toVideoFormat']").show();
                break;
            case 'videoCompress':
                $("input[name='toImgFormat']").hide();
                $("input[name='compressPersent']").hide();
                $("input[name='toVideoFormat']").hide();
                $("select[name='compressType']").hide();
                $("input[name='crf']").show();
                break;
            default:
                $("input[name='crf']").hide();
                $("input[name='compressPersent']").hide();
                $("input[name='toImgFormat']").hide();
                $("input[name='toVideoFormat']").hide();
                $("select[name='compressType']").hide();
        }
    });


    function downloadFile(url, filename) {
        // 创建一个隐藏的a标签
        var elem = window.document.createElement('a');
        elem.href = url;
        elem.target = '_blank';
        elem.download = filename;                            // 设置下载的文件名
        document.body.appendChild(elem);
        // 模拟点击
        elem.click();
        // 清理
        document.body.removeChild(elem);
    }
</script>

</html>